@import '~igniteui-angular/lib/core/styles/themes/schemas/light/grid';
@import './base';

////
/// @group schemas
/// @access private
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
////

/// Generates the base dark grid schema.
/// @type {Map}
/// @prop {Map} header-background [igx-color: ('grays', 100), hexrgba: $_base-dark-color] - The table header background color.
/// @prop {Color} content-background [#222] - The table body background color.
/// @prop {Color} row-odd-background [#222] - The background color of odd rows.
/// @prop {Color} row-even-background [#222] - The background color of even rows.
/// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: $_base-dark-color] - The hover row background color.
/// @prop {Map} row-selected-background [igx-color: ('secondary', 500), rgba: .24, hexrgba: $_base-dark-color] - The selected row background color.
/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 'A700'), rgba: .24, hexrgba: $_base-dark-color] - The selected row background color on hover.
/// @prop {Color} row-selected-text-color [#fff] - The selected row text color.
/// @prop {Color} ghost-header-background [#222] - The dragged header background color.
/// @prop {Color} cell-editing-background [#222] - The background for the cell in editing mode.
/// @prop {Map} cell-selected-background [igx-color: ('grays', 200), hexrgba: $_base-dark-color] - The selected cell background color.
/// @prop {Map} cell-selected-text-color [#fff] - The selected cell text color.
/// @prop {Map} grouparea-background [igx-color: ('grays', 100), hexrgba: $_base-dark-color] - The grid group area background color.
/// @prop {Map} group-row-background [igx-color: ('grays', 100), hexrgba: $_base-dark-color] - The grid group row background color.
/// @prop {Map} group-row-selected-background [igx-color: ('grays', 200), hexrgba: $_base-dark-color] - The drop area background on drop color.
/// @prop {Color} filtering-header-background [#222] - The background color of the filtered column header.
/// @prop {Color} filtering-row-background [#222] - The background color of the filtering row.
/// @prop {Map} body-summaries-background [igx-color: ('grays', 300), hexrgba: $_base-dark-color] - The background color of the summary groups located the body.
/// @prop {Map} body-summaries-text-color [igx-color: ('grays', 300), hexrgba: $_base-dark-color, text-contrast: ()] - The text color of the summary groups located the body.
/// @prop {Map} root-summaries-background [igx-color: ('grays', 100), hexrgba: $_base-dark-color] - The background color of the summary groups located the footer.
/// @prop {Map} root-summaries-text-color [igx-color: ('grays', 100), hexrgba: $_base-dark-color, text-contrast: ()] - The text color of the summary groups located the footer.
$_base-dark-grid: (
    header-background: (
        igx-color: ('grays', 100),
        hexrgba: $_base-dark-color
    ),

    header-text-color: (
        igx-color: ('grays', 800)
    ),

    content-background: $_base-dark-color,

    row-odd-background: $_base-dark-color,

    row-even-background: $_base-dark-color,

    row-hover-background: (
        igx-color: ('grays', 200),
        hexrgba: $_base-dark-color
    ),

    row-hover-text-color: #fff,

    row-selected-background: (
        igx-color: ('secondary', 500),
        rgba: .24,
        hexrgba: $_base-dark-color
    ),

    row-selected-hover-background: (
        igx-color: ('secondary', 'A700'),
        rgba: .24,
        hexrgba: $_base-dark-color
    ),

    row-selected-text-color: #fff,

    ghost-header-background: $_base-dark-color,

    cell-editing-background: $_base-dark-color,

    cell-selected-background: (
        igx-color: ('grays', 200),
        hexrgba: $_base-dark-color
    ),

    grouparea-background: (
        igx-color: ('grays', 100),
        hexrgba: $_base-dark-color
    ),

    group-row-background: (
        igx-color: ('grays', 100),
        hexrgba: $_base-dark-color
    ),

    group-row-selected-background: (
        igx-color: ('grays', 200),
        hexrgba: $_base-dark-color
    ),

    filtering-header-background: $_base-dark-color,

    filtering-row-background: $_base-dark-color,

    cell-selected-text-color: #fff,

    body-summaries-background: (
        igx-color: ('grays', 300),
        hexrgba: $_base-dark-color
    ),

    body-summaries-text-color: (
        igx-color: ('grays', 100),
        hexrgba: $_base-dark-color,
        text-contrast: ()
    ),

    root-summaries-background: (
        igx-color: ('grays', 300),
        hexrgba: $_base-dark-color
    ),

    root-summaries-text-color: (
        igx-color: ('grays', 300),
        hexrgba: $_base-dark-color,
        text-contrast: ()
    ),

    row-highlight: (
        igx-color: ('secondary', 500)
    ),

    row-ghost-background: (
        igx-color: ('primary', 900)
    )
);

/// Generates a dark grid schema based on a mix of $_light-grid and $_base-dark-grid.
/// @requires extend
/// @requires $_light-grid
/// @requires $_base-dark-grid
/// @see $default-palette
$_dark-grid: extend($_light-grid, $_base-dark-grid);


/// Generates a dark fluent grid schema based on a mix of $_fluent-grid and $_base-dark-grid.
/// @requires extend
/// @requires $_fluent-grid
/// @requires $_base-dark-grid
$_dark-fluent-grid: extend(
    $_fluent-grid,
    $_base-dark-grid,
    (
        row-hover-background: (
            igx-color: ('grays', 100),
            hexrgba: $_base-dark-color
        ),

        row-selected-background: (
            igx-color: ('grays', 200),
            hexrgba: $_base-dark-color
        ),

        row-selected-hover-background: (
            igx-color: ('grays', 300),
            hexrgba: $_base-dark-color
        ),
    )
);
